<template>
	<view class="elefonnummer ">
		<view class="elefonnummer-top">
			<view class="changephonenumber">更换手机号</view>
			<view class="current">当前手机号:12345678901</view>
		</view>
		<view class="" v-if="isShow">
			<view class="uni-column">
				<view class="uni-form-item ">
					<input class="uni-input" focus placeholder="输入短信验证码" />
					<view class="close" >
						<text  @click="sendCode" >获取验证码</text>
						
					</view>
				</view>
			</view>
			
			<view class="ding-bnt" @click="loginSwitch">
				<view>下一步</view>
			</view>
		</view>
		
		<view class="" v-if="!isShow">
			<view class="uni-column">
				<input class="u-input" :value="mobileNo"  data-key="mobileNo" focus placeholder="请输入新手机号" @input="inputChange"/>
				<view class="uni-form-item ">
					<input class="uni-input" :value="verificationCode" data-key="verificationCode" focus placeholder="输入短信验证码"  @input="inputChange"/>
					<view class="close">
						<text  @click="sendCode" v-show="verification">获取验证码</text>
						<text  v-show="!verification">{{ timer }} 秒后重新获取</text>
					</view>
				</view>
			</view>
			
			<view class="ding-bnt" @click="toBindMobileNo" :disabled="submitting">
				<view>确认更换</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShow: true,
				mobileNo: '',
				verificationCode: '',
				verification: true, // 通过v-show控制显示获取还是倒计时
				timer: 50, // 定义初始时间为60s
			}
		},
		methods:{
			
			// ...mapMutations(['login']),
			
			loginSwitch() {
				this.isShow = !this.isShow
			},
			//发送短信验证码
			sendCode() {
				const {
					mobileNo,
					verificationCode
				} = this;
				if (!this.$api.util.validateMobileNo(mobileNo)) {
					this.$api.msg('手机号码格式错误');
					return
				}
				this.$api.request.sms({
					type: 'MOBILE',
					mobileCountryCode: '86',
					mobileNo: mobileNo
				}, loginRes => {
					if (loginRes.body.status.statusCode === '0') {
						this.$api.msg('验证码已发送');
						this.timer = 5
						this.verification = false
						this.countDown() // 执行验证码计时
					} else {
						this.$api.msg(loginRes.body.status.errorDesc);
					}
				});
			},
			// 验证码倒计时
			countDown() {
				let auth_timer = setInterval(() => {
					// 定时器设置每秒递减
					this.timer-- // 递减时间
					uni.setStorage({
						key: 'timer',
						data: this.timer,
						success: function() {}
					})
					if (this.timer <= 0) {
						this.verification = true // 60s时间结束还原v-show状态并清除定时器
						clearInterval(auth_timer)
					}
				}, 1000)
			},
			inputChange(e) {
				const key = e.currentTarget.dataset.key;
				this[key] = e.detail.value;
			},
			
			
			async toBindMobileNo() {
				var that = this;
				this.submitting = true;
				const {
					mobileNo,
					verificationCode,
				} = this;
				var isFormValid = true;
				if (!this.$api.util.validateMobileNo(mobileNo)) {
					this.$api.msg('手机号码格式错误');
					isFormValid = false;
				}
				if (!this.$api.util.validateVerificationCode(verificationCode)) {
					this.$api.msg('请输入6位数字的验证码');
					isFormValid = false;
				}
				if (!isFormValid) {
					this.submitting = false;
					return;
				}
				const requestData = {
					type: 'MOBILE',
					mobileNo: mobileNo,
					mobileCountryCode: '86',
					verificationCode: verificationCode
				};
				this.$api.request.verifyCode(requestData, verifyRes => {
					if (verifyRes.body.status.statusCode === '0') {
						//验证码校验成功后重置密码
						this.$api.request.editInfo({
							actionType: 'PERSONALPHONE',
							personalPhone: mobileNo,
							personalPhoneCountryCode: '86'
						}, resetRes => {
							if (resetRes.body.status.statusCode === '0') {
								this.$api.msg('绑定成功');
								setTimeout(function() {
									that.afterBind();
								}, 2000)
							} else {
								this.$api.msg(resetRes.body.status.errorDesc);
								this.submitting = false;
							}
						});
					} else {
						this.$api.msg(verifyRes.body.status.errorDesc);
						this.submitting = false;
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.elefonnummer {
		padding: 0 20rpx;
		height: 100%;

		.elefonnummer-top {
			padding: 65rpx 0;
			margin: auto;

			.changephonenumber {
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: rgba(51, 51, 51, 1);
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.current {
				margin-top: 22rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: rgba(153, 153, 153, 1);
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.uni-column {
			padding: 0 25rpx;
			height: auto;
			background-color: #FFFFFF;
			border-radius: 12rpx;

			.u-input {
				padding: 35rpx 0;
				background-color: #FFFFFF;
				border-bottom: 1rpx solid #EFEFEF;

			}

			.uni-form-item {
				background-color: #FFFFFF;
				display: flex;
				padding: 35rpx 0;
				position: relative;


				.uni-input {
					width: 100%;
					font-size: 28rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: rgba(184, 184, 184, 1);
				}

				.close {
					display: flex;
					align-items: center;
					justify-content: space-between;

					text {
						width: 152rpx;
						height: 48rpx;
						border: 1px solid rgba(219, 219, 219, 1);
						border-radius: 24rpx;
						line-height: 48rpx;
						text-align: center;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: rgba(247, 39, 74, 1);
					}
				}

			}
		}

		.ding-bnt {

			margin-top: 120rpx;

			view {
				width: 100%;
				height: 72rpx;
				line-height: 72rpx;
				text-align: center;
				background: #F74F6B;
				border-radius: 36rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: rgba(255, 255, 255, 1);
			}
		}
	}
</style>
